<!--<template>-->
<!--    <a-modal :visible="true" :title="title">-->
<!--        <a-form>-->
<!--            <a-form-item label="编号" v-if="id">-->
<!--                <a-input readonly v-model:value="id"></a-input>-->
<!--            </a-form-item>-->
<!--            <a-form-item label="姓名">-->
<!--                <a-input v-model:value="dto.name"></a-input>-->
<!--            </a-form-item>-->
<!--            <a-form-item label="性别">-->
<!--                <a-radio-group  v-model:value="dto.sex">-->
<!--                    <a-radio-button value="男">男</a-radio-button>-->
<!--                    <a-radio-button value="女">女</a-radio-button>-->
<!--                </a-radio-group>-->
<!--            </a-form-item>-->
<!--            <a-form-item label="年龄">-->
<!--                <a-input-number  v-model:value="dto.age"></a-input-number>-->
<!--            </a-form-item>-->
<!--        </a-form>-->
<!--    </a-modal>-->
<!--</template>-->

<!--<script lang="ts" setup>-->

<!--import axios from "../api/request";-->
<!--import {ref, computed} from "vue";-->
<!--import {useRequest} from "vue-request";-->
<!--import {StudentSaveDto, AxiosRespString} from "../model/Model8080";-->
<!--import {Form} from "ant-design-vue";-->


<!--const props = defineProps<{ id: number, dto: StudentSaveDto }>();-->

<!--const title = computed(() => props.id === 0 ? '新增学生' : '修改学生');-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->


<template>
    <a-modal :visible="visible" :title="title" @ok="onOk" @cancel="onCancel">
        <a-form>
            <a-form-item label="编号" v-if="id">
                <a-input readonly :value="id"></a-input>
            </a-form-item>
            <a-form-item label="姓名" v-bind="validateInfos.name">
                <a-input v-model:value="dto.name"></a-input>
            </a-form-item>
            <a-form-item label="性别" v-bind="validateInfos.sex">
                <a-radio-group v-model:value="dto.sex" >
                    <a-radio-button value="男">男</a-radio-button>
                    <a-radio-button value="女">女</a-radio-button>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="年龄" v-bind="validateInfos.age">
                <a-input-number v-model:value="dto.age" ></a-input-number>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts" setup>

import axios from "../api/request";
import {ref, computed} from "vue";
import {useRequest} from "vue-request";
import {StudentSaveDto, AxiosRespString} from "../model/Model8080";
import {Form} from "ant-design-vue";


const props = defineProps<{ id: number, dto: StudentSaveDto, visible: boolean }>();

const title = computed(() => props.id === 0 ? '新增学生' : '修改学生');

const emit = defineEmits(['update:visible', 'saved']);

async function onOk() {
    try {
        await validate()
        if (props.id === 0) {
            await insert(props.dto)
        } else {
            await update(props.dto)
        }
        emit('saved')
        console.log("---------------");
        emit('update:visible', false)
    } catch (e) {
        console.log(e)
    }
}

function onCancel() {
    console.log("---------------");
    emit('update:visible', false)
}

// function updateName(value: string) {
//     emit('update:name', value); // 发送事件更新name prop值
// }
//
// function updateSex(value: string) {
//     emit('update:sex', value); // 发送事件更新sex prop值
// }
//
// function updateAge(value: number) {
//     emit('update:age', value); // 发送事件更新age prop值
// }

const {runAsync: insert} = useRequest<AxiosRespString, StudentSaveDto[]>
((dto) => axios.post('/api/students', dto), {
    manual: true
});

const {runAsync: update} = useRequest<AxiosRespString, StudentSaveDto[]>
((dto) => axios.put(`/api/students/${props.id}`, dto), {
    manual: true
});

const rules = ref({
    name: [
        {required: true, message: '姓名必须'},
        {min: 2, message: '字符最少为2'}
    ],
    sex: [
        {required: true, message: '性别必须'},
    ],
    age: [
        {required: true, message: '年龄必须'},
        {min: 10, message: '年龄最小10岁', type: 'number'},
        {max: 120, message: '年龄最大120岁', type: 'number'}
    ]
});

 const {validateInfos,validate} = Form.useForm(props.dto,rules);

</script>

<style scoped>

</style>
